<template>
 <div class="customer_lead">
   <div class="file_box">
       <div class="download">
         <div class="download_box">
             <span class="number">1</span>
             <span class="button">下载模版</span>
         </div>  
         <div class="text_intro">
             <p class="text">按模板格式填写信息，然后再导入；</p>
             <p class="text">模板中手机号必须填写，否则导入不成功；</p>
             <Button icon="ios-download-outline" type="primary" class="download_button" @click="exportData">下载模版</Button>
         </div> 
       </div>
       <div class="upload">
          <div class="upload_box">
             <span class="number">2</span>
             <span class="button">上传文件</span>
          </div>  
          <div class="upload_text_intro">
                <div class="upload_box">
                   <Upload
                        multiple
                        action="//jsonplaceholder.typicode.com/posts/"
                        :format="['csv']" :on-format-error="handleFormatError" :on-preview="handlePreview">
                        <Button type="primary" icon="ios-cloud-upload-outline">上传文件</Button>
                    </Upload>
                    <p class="text">仅支持CSV文件</p>
                </div>
          </div> 
       </div>
   </div>
   <div class="leading_record">
     <h3 class="leading_record_title">历史导入记录</h3>
    <div class="leading_table">
         <Table border :columns="columns7" :data="data7" ref="table"></Table>
    </div>
    <Row type="flex" justify="center" class="code-row-bg">
      <Col style="margin-top:2vh;">
        <Page :id="pageId" show-total :total="total" :page-size="pageSize" @on-change="pageable" show-sizer show-elevator></Page>
      </Col>
      <Col push="1">
          <Button style="margin-top: 2vh;" type="primary" @click="goElevatorPage(pageId)">跳转</Button>
      </Col>
    </Row>
    <Modal
        v-model="modal1"
        title="保存为分组"
        @on-cancel="cancel"
        @on-ok="ok">
         <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
            <FormItem label="人群名称:" prop="groupname">
                <Input v-model="formValidate.groupname" placeholder="请输入人群名称:" style="width:200px;"></Input>
            </FormItem>
            <FormItem label="选择人群分类:" prop="groupKind" :label-width="100" style="margin-top:20px;">
                <Select v-model="formValidate.groupKind" placeholder="请选择..." style="width:200px;"  clearable>
                    <Option value="beijing">New York</Option>
                    <Option value="shanghai">London</Option>
                    <Option value="shenzhen">Sydney</Option>
                </Select>
            </FormItem>
        </Form>
    </Modal>
   </div>
 </div>
</template>
<script>
export default {
  name: "CustomerLead",
  data() {
    return {
      pageId:"targetPage",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      modal1: false,
      columns7: [
        {
          title: "文件名称",
          key: "filename",
          align:'center',
          width:400,
        },
        {
          title: "状态",
          key: "status",
          align:'center',
          width:100
        },
        {
          title: "总客户数",
          key: "customertotal",
          align:'center',
          width:100
        },
        {
          title: "上传人",
          key: "uploadperson",
          align:'center',
          width:150,
        },
        {
          title: "上传时间",
          key: "uploadtime",
          align:'center',
          width:300,
          sortable: true,
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.download();
                    }
                  }
                },
                "下载文件"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.modal1 = true;
                    }
                  }
                },
                "保存为分组"
              )
            ]);
          }
        }
      ],
      data7: [
        {
          filename: "import_1.csv （216.k）",
          status: '导入成功',
          customertotal: "3665",
          uploadperson:'sugus',
          uploadtime:'2018-10-12',
        },
        {
          filename: "import_2.csv （316.k）",
          status: '导入成功',
          customertotal: "53665",
          uploadperson:'sugus',
          uploadtime:'2018-10-13',
        },
        {
          filename: "import_3.csv （616.k）",
          status: '导入成功',
          customertotal: "13665",
          uploadperson:'sugus',
          uploadtime:'2018-10-16',
        },
        {
          filename: "import_4.csv （916.k）",
          status: '导入成功',
          customertotal: "366215",
          uploadperson:'sugus',
          uploadtime:'2018-10-14',
        },
      ],
      formValidate:{
        groupname:'',
        groupKind:'',
      },
      ruleValidate:{
        groupname: [{ required: true, message: "人群名称不能为空", trigger: "blur" },
       
        ],
        PhoneNumber: [
          { required: true, message: "收件人手机号不能为空", trigger: "blur" },
          { type: "number", message: "收件人手机号格式不正确", trigger: "blur" }
        ],
      }
    };
  },
  methods: {
    exportData(){},
    handlePreview(file) {
      this.$Notice.info({
        title: " 文件信息",
        desc: "您选择的文件已经成功上传!"
      });
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc: "文件格式不正确，请上传csv格式的文件哈。"
      });
    },
    download(){
         this.$refs.table.exportCsv({
            filename: '客户导入记录',
      });
    },
    ok () {
        this.$Message.info('保存成功!');
    },
    cancel () {
        this.$Message.info('保存失败!');
    },
    pageable(current) {
        this.pageNum = current;
        // this.fetchQuestionList();
    },
    goElevatorPage(pageId){
      var evtObj;
      var thisPage=document.getElementById(pageId);
      var elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");
      if(elevatorDiv && elevatorDiv.length>0){
        var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
        if (window.KeyEvent) {//firefox 浏览器下模拟事件
          evtObj = document.createEvent('KeyEvents');
          evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);
        } else {//chrome 浏览器下模拟事件
          evtObj = document.createEvent('UIEvents');
          evtObj.initUIEvent("keyup", true, true, window, 1);
          delete evtObj.keyCode;
          if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
            Object.defineProperty(evtObj, "keyCode", { value: 13 });
          } else {
            evtObj.key = String.fromCharCode(13);
          }
        }
        pageInput.dispatchEvent(evtObj);
      }
    },
   }
};
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.customer_lead {
  @include container_global;
  .file_box {
    width: 82vw;
    min-height: 40vh;
    display: flex;
    .download {
      padding: 2vh 0px 0px 2vw;
      .download_box {
        margin-bottom: 3vh;
        .number {
          display: inline-block;
          width: 30px;
          height: 30px;
          color: #fff;
          text-align: center;
          line-height: 30px;
          background-color: #68b6ff;
        }
        .button {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
        }
      }
      .text_intro {
        width: 40vw;
        min-height: 40vh;
        background-color: #fff;
        border: 1px solid lightgray;
        .text {
          height: 3vh;
          width: 40vw;
          font-size: 0.8rem;
          padding-left: 2vw;
          text-align: left;
          line-height: 5vh;
        }
        .download_button {
          margin-top: 3vh;
          margin-left: 2vw;
        }
      }
    }
    .upload {
      padding: 2vh 0px 0px 2vw;
      position: relative;
      .upload_box {
        margin-bottom: 3vh;
        .number {
          display: inline-block;
          width: 30px;
          height: 30px;
          color: #fff;
          text-align: center;
          line-height: 30px;
          background-color: #68b6ff;
        }
        .button {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
        }
      }
      .upload_text_intro {
        width: 40vw;
        height: 40vh;
        background-color: #fff;
        border: 1px solid lightgray;
        display: flex;
        align-items: center;
        justify-content: center;
        .upload_box {
          .text {
            height: 3vh;
            font-size: 0.8rem;
          }
        }
      }
    }
  }
  .leading_record {
    width: 82vw;
    min-height:20vh;
    margin: 2vh 0px 10vw 2vw;
    .leading_record_title {
      width: 150px;
      height: 50px;
      text-align: left;
      line-height: 50px;
      color: #989;
    }
  }
}
</style>
